<!--筛选弹窗组件-->
<template>
	<van-popup v-model="showScreen" position="right" class="screen-popup" :close-on-click-overlay="false"
		@click-overlay="clickOverlay">

		<view class="screen-type-item" v-for="(typeItem, typeIndex) in singleList" :key="typeIndex">
			<plateTitle :title="typeItem.name" :isRequired="false" class="plate-title" />
			<view class="screen-option-container">
				<view class="screen-option-item" :class="{active: selected1[typeItem.type] === item.dictCode}"
					v-for="(item,index) in typeItem.child" :key="index" @click="select1(typeItem, item)">
					{{ item.dictLabel }}
				</view>
			</view>
		</view>
		<view class="screen-popup-content-main">
			<view class="screen-type-item" v-for="(typeItem, typeIndex) in typeList" :key="typeIndex">
				<plateTitle :title="typeItem.name" :isRequired="false" class="plate-title" />
				<!-- data-dictCode -->
				<view class="screen-option-container">
					<view class="screen-option-item"
						:class="{active: selected[typeItem.type] && selected[typeItem.type].includes(item.dictCode)}"
						v-for="(item,index) in typeItem.child" :key="index" @click="select(typeItem, item)">
						{{ item.dictLabel }}
					</view>
				</view>
			</view>

			<!-- 设备品牌 -->
			<view class="screen-type-item" v-if="isShow2" v-for="(typeItem, typeIndex) in equipmentBrandList"
				:key="typeItem.type">
				<plateTitle :title="typeItem.name" :isRequired="false" class="plate-title" />
				<!-- data-dictCode -->
				<view class="screen-option-container">
					<view class="screen-option-item"
						:class="{active: selected[typeItem.type] && selected[typeItem.type].includes(item.dictCode)}"
						v-for="(item,index) in typeItem.child" :key="item.dictLabel" @click="select(typeItem, item)">
						{{ item.dictLabel }}
					</view>
				</view>
			</view>

			<!-- 设备型号 -->
			<view class="screen-type-item" v-if="isShow1">
				<plateTitle title="设备型号" :isRequired="false" class="plate-title" />
				<!-- data-dictCode -->
				<view class="screen-option-container">
					<view class="screen-option-item"
						:class="{active: selected[equipmentTypeList.type] && selected[equipmentTypeList.type].includes(item.dictCode)}"
						v-for="(item,index) in equipmentTypeList.child" :key="item.dictCode"
						@click="select(equipmentTypeList, item)">
						{{ item.dictLabel }}
					</view>
				</view>
			</view>

			<slot></slot>

		</view>


		<view class="btn-container">
			<van-button block type="info" color="#417ADC" plain @click="clickOverlay">取消</van-button>
			<van-button block type="info" color="#417ADC" @click="screenConfirm">确认</van-button>
		</view>
	</van-popup>
</template>

<script>
	import {
		constant
	} from 'lodash';
	import plateTitle from '../../../components/business/plateTitle.vue';
	import {
		getOption,
		getOtherOption
	} from "../../../api/ydtzApi.js"
	export default {
		name: "screen",
		components: {
			plateTitle
		},
		props: {
			typeList: {
				type: Array,
				required: true,
			},
			singleList: {
				type: Array,
				required: false,
			},
			deviceFlag: {
				type: String,
				required: false,
			},
			showScreen: {
				type: Boolean,
				required: true,
			},
			multipleChoice: {
				type: Boolean,
				required: false,
				default: false
			}
		},
		watch: {
			typeList: {
				deep: true,
				immediate: true,
				handler: function(newVal) {
					this.selected = newVal.reduce((prev, item) => {
						// 默认选择全部
						prev[item.type] = [item.child[0].dictCode];
						return prev;
					}, {})
				}
			},
			singleList: {
				deep: true,
				immediate: true,
				handler: function(newVal) {
					this.selected1 = newVal.reduce((prev, item) => {
						// 默认选择全部
						prev[item.type] = item.child[0].dictCode;
						return prev;
					}, {})
				}
			}
		},
		onLoad() {

		},
		data() {
			return {
				selected: {}, // 多选
				selected1: {}, // 单选
				isShow1: false,
				isShow2: false,
				isShow3: false,
				manufacturerFlag: null,
				equipmentTypeList: [],
				equipmentBrandList: [{
						name: '设备品牌',
						type: 5,
						child: [{
							TITLE: '全部',
							VALUE: 1,
							isActive: true
						}, ]
					},
					{
						name: '设备归属',
						type: 2,
						child: [{
							TITLE: '全部',
							VALUE: 1,
							isActive: true
						}, ]
					},
				],
				equipmentQwnershipList: []
			}
		},
		methods: {
			select1(typeItem, seletedItem) {
				// 未含有的---添加
				if (!this.selected1[typeItem.type]) {
					this.selected1[typeItem.type] = seletedItem.dictCode;
				} else {
					// 已经含有的---两种情况  相同的---去除    不同的----替换
					if (this.selected1[typeItem.type] === seletedItem.dictCode) {
						this.selected1[typeItem.type] = '';
					} else {
						this.selected1[typeItem.type] = seletedItem.dictCode
					}
				}
				let dictCode = seletedItem.dictCode
				this.manufacturerFlag = seletedItem.dictCode
				if (this.selected1['1']) {
					this.$apiRequest.ydtzApi.getOption({
						dictFlag: 5,
						manufacturerFlag: dictCode,
					}).then(({
						data: res
					}) => {
						let arr = res
						arr.unshift({
							dictCode: -1,
							dictLabel: "全部",
							default: false
						})
						this.equipmentBrandList[0].child = arr
					})
					this.$apiRequest.ydtzApi.getOtherOption({
						dictFlag: dictCode,
					}).then(({
						data: res
					}) => {
						let arr = res
						arr.unshift({
							dictCode: -1,
							dictLabel: "全部",
							default: false
						})
						this.equipmentBrandList[1].child = arr
					})
					this.$set(this.selected, 5, [-1])
					this.$set(this.selected, 2, [-1])
					this.isShow2 = true
				}
			},
			select(typeItem, seletedItem) {
				const selectedArr = this.selected[typeItem.type]
				if (!this.selected[typeItem.type]) {
					this.$set(this.selected, typeItem.type, [seletedItem.dictCode])
				} else {
					const index = this.selected[typeItem.type].indexOf(seletedItem.dictCode)
					if (index === -1) {
						// 多选
						if (this.multipleChoice) {
							// 第一次点击其他的
							const isAll = this.selected[typeItem.type].includes(-1)
							if (seletedItem.dictCode === -1) {
								if (!isAll) {
									this.selected[typeItem.type] = [-1]
								}
							} else {
								if (isAll) {
									this.selected[typeItem.type] = [seletedItem.dictCode]
								} else {
									const index = this.selected[typeItem.type].indexOf(seletedItem.dictCode)
									if (index !== -1) {
										this.selected[typeItem.type].splice(index, 1)
									} else {
										this.selected[typeItem.type].push(seletedItem.dictCode)
									}
								}
							}
						} else {
							// 单选
							this.selected[typeItem.type] = [seletedItem.dictCode]
						}
					} else {
						this.selected[typeItem.type].splice(index, 1)
					}
				}
				console.log(this.selected['5'], 1111111111111)
				if (this.selected['5'].length > 0 && typeItem.name == '设备品牌') {
					let manufacturerFlag = null
					if (this.isShow2) {
						manufacturerFlag = this.manufacturerFlag
					} else {
						if (this.deviceFlag == 1) {
							manufacturerFlag = 1
						} else if (this.deviceFlag == 2) {
							manufacturerFlag = 2
						} else if (this.deviceFlag == 3) {
							manufacturerFlag = 5
						}
					}
					this.$apiRequest.ydtzApi.getOption({
						dictFlag: 6,
						manufacturerFlag,
						manufacturers: this.selected['5']
					}).then(({
						data: res
					}) => {
						let arr = res
						arr.unshift({
							dictCode: -1,
							dictLabel: "全部",
							default: false
						})
						this.equipmentTypeList = {
							name: '设备型号',
							type: 4,
							child: res
						}
					})
					this.isShow1 = true
					this.$set(this.selected, 4, [-1])
				}
			},
			closePopup() {
				this.$emit('closePopup', false);
			},
			clickOverlay() {
				this.closePopup()
			},
			screenConfirm() {
				this.closePopup()
				this.$emit('confirm', this.selected,this.selected1)
			}
		}
	};
</script>

<style scoped lang="scss">
	.screen-popup {
		width: px2vw(820);
		// height: calc(100vh - #{px2vh(212)});
		padding: px2vh(162) px2vw(40) px2vh(50);

		.screen-popup-content-main {
			min-height: calc(100vh - #{px2vh(342)});
			padding-bottom: px2vh(30);
		}


		.screen-type-item {
			margin-bottom: px2vh(30);

			.plate-title {
				margin-bottom: px2vh(36);
			}

			.screen-option-container {
				display: flex;
				//justify-content: space-between;
				flex-wrap: wrap;

				.screen-option-item {
					width: px2vw(260);
					min-height: px2vh(90);
					margin-bottom: px2vh(20);
					// line-height: px2vh(40);
					background: #f7f7f7;
					color: #666;
					font-size: px2vh(36);
					text-align: center;
					border-radius: $border-radius-base;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.screen-option-item:not(:nth-child(3n)) {
					margin-right: px2vw(20);
				}

				.screen-option-item.active {
					background: #ecf1fb;
					color: #417ADC;
				}
			}
		}

		.btn-container {
			width: 100%;
			height: px2vh(200);
			background-color: #fff;
			display: flex;
			// justify-content: space-between;
			position: sticky;
			// bottom: px2vh(-50);
			bottom: 0;
			left: 0;
			padding-top: px2vh(10);

			.van-button {
				height: px2vh(100);
				margin-right: px2vw(30);
				border-radius: $border-radius-base;
			}

		}
	}
</style>